<template>
  <div class='echartsthree' :style="{height:fullHeights+'px'}">
    <div id="echarts_three" :style="{height:fullHeight+'px'}"></div>
  </div>
</template>

<script>
  module.exports = {
    name: "echarts_three",
    data() {
      return {
        fullHeight: document.documentElement.clientHeight - 260,
        fullHeights: document.documentElement.clientHeight - 168,
        roadsectionnumlist: [],
        yearlist: [],
        routecount: [],
        totalroutecount: []
      }
    },
    mounted() {
      this.echartsdata();
    },
    methods: {
      get(url, params) {
        return new Promise((resolve, reject) => {
          axios.get('./js/echarts_three.json')
            .then(response => {
              resolve(response);
            })
            .catch(err => {
              reject(err);
            })
        })
      },
      async echartsdata() {
        let myChart = echarts.init(document.getElementById('echarts_three'));
        let datas = await this.get();
        this.roadsectionnumlist = datas.data;
        this.roadsectionnumlist.forEach((v, i) => {
          this.yearlist.push(v['建造年份']);
          this.routecount.push(v['路段数']);
          this.totalroutecount.push(v['累计路段数']);
        })
        var colors = ['rgba(24,144,255,.6)', 'rgba(0,165,71,.6)']
        let option = {
          color: colors,
          tooltip : {
              trigger: 'axis',
              axisPointer: {
                  type: "cross",
                  label: {
                      backgroundColor:'rgba(0,0,0,.6)',
                      formatter: function (params) {
                        if (params.seriesData.length === 0) {
                            window.mouseCurValue = params.value;
                        }
                        return parseInt(params.value);
                      }
                  }
              },
              formatter: function (params) {
                let res = "", sum = 0;
                for (let i = 0; i < params.length; i++) {
                    let series = params[i];
                    sum += Number(series.data);
                    if (sum >= window.mouseCurValue) {
                        res = series.axisValue + "<br/>" + series.marker + series.seriesName + ":" + series.data +"条"+ "<br/>";
                        break;
                    }
                }
                return res;
              }
          },
          legend: {
            icon: "circle",
            top: 0,
            right: 0,
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              fontSize: 14,
              color: '#fff',
              padding: [2, 20, 0, 0]
            },
            data: ["路段数", "累计路段数"]
          },
          backgroundColor: '',
          grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            color: '#E9E9E9',
            data: this.yearlist,
            axisLine: {
              lineStyle: {
                color: '#E9E9E9'
              }
            },
            axisTick: {
              show: false
            }
          }],
          yAxis: [{
            axisLabel: {
              color: '#E9E9E9'
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: '#E9E9E9',
                type: 'doshed'
              }
            }
          }],
          series: [{
              name: '路段数',
              type: 'bar',
              data: this.routecount,
              barWidth: '',
              itemStyle: {
                normal: {
                  color: 'rgba(0,165,71,.6)'
                }
              }
            },
            {
              data: this.totalroutecount,
              type: 'line',
              smooth: false,
              name: '累计路段数',
              symbol: 'none',
              lineStyle: {
                color: 'rgba(24,144,255,.6)',
                width: 2
              },
              areaStyle: {
                normal: {
                  color: 'rgba(24, 144, 255, 0.2)'
                }
              }
            }
          ]
        };
        myChart.setOption(option);
        window.onresize = function() {
          myChart.resize();
        }
      }
    }
  }
</script>
